<template>
  <div>
    <!-- 顶部栏 -->
    <mt-header title="奈雪茶">
      <mt-button slot="left" icon="back" @click="$router.go(-1)"></mt-button>
      <mt-button slot="right">
        <router-link to="/login" style="color: #fff">登录</router-link>
      </mt-button>
    </mt-header>
    <mt-field
      label="用户名"
      placeholder="请输入用户名"
      v-model="uname"
      :state="nameState"
      @blur.native.capture="checkName"
    ></mt-field>
    <mt-field
      label="密码"
      type="password"
      placeholder="请输入密码"
      v-model="upwd"
      :state="pwdState"
      @blur.native.capture="checkPwd"
    ></mt-field>
    <mt-field
      label="确认密码"
      type="password"
      placeholder="请再次输入密码"
      v-model="re_upwd"
      :state="repwdState"
      @blur.native.capture="checkRepwd"
    ></mt-field>
    <mt-field
      label="手机号"
      type="text"
      placeholder="请输入手机号"
      v-model="phone"
      :state="phoneState"
      @blur.native.capture="checkPhone"
    ></mt-field>
    <mt-button @click="reg" type="primary" size="large">免费注册</mt-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      nameState: "", //用于标识用户名输入框的状态
      upwd: "",
      pwdState: "",
      re_upwd: "",
      repwdState: "",
      phone: "",
      phoneState: "",
    }
  },
  methods: {
    // 验证用户名
    checkName() {
      let exp = /^\w{6,15}$/
      if (exp.test(this.uname)) {
        this.nameState = "success"
        return true
      } else {
        this.nameState = "error"
        return false
      }
    },
    // 验证密码
    checkPwd() {
      let exp = /^\d{6}$/
      if (exp.test(this.upwd)) {
        this.pwdState = "success"
        return true
      } else {
        this.pwdState = "error"
        return false
      }
    },
    // 验证确认密码
    checkRepwd() {
      let exp = /^\d{6}$/
      if (exp.test(this.re_upwd) && this.upwd == this.re_upwd) {
        this.repwdState = "success"
        return true
      } else {
        this.repwdState = "error"
        return false
      }
    },
    //验证手机号
    checkPhone() {
      let exp = /^1[3-9]\d{9}$/
      if (exp.test(this.phone)) {
        this.phoneState = "success"
        return true
      } else {
        this.phoneState = "error"
        return false
      }
    },
    // 提交注册-验证表单
    reg() {
      if (
        this.checkName() &&
        this.checkPwd() &&
        this.checkRepwd() &&
        this.checkPhone()
      ) {
        console.log("验证成功，开始发送注册请求...")
        const url = "user/reg"
        const { uname, upwd, phone } = this
        const params = `unames=${uname}&upwd=${upwd}&phone=${phone}`
        this.axios.post(url, params).then(res => {
          console.log("注册信息:", res)
          if (res.data.code == 1) {
            this.$dialog
              .alert({
                title: "注册成功!",
                message: "即将跳转登录页",
                theme: "round-button",
              })
              .then(() => {
                this.$router.push("/login")
              })
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
